<template>
    <view class="content">
		<view v-if="dashboards && dashboards.length >0">
			<view v-for="(menuItem, menuIndex) in dashboards" :key="menuIndex">
			    <view class="padding listTitle">
			        {{ menuItem.name }}
			    </view>
			    <view class="part flexRow">
			        <menu-entry
			            v-for="(item, index) in menuItem.children"
			            :icon="item.icon"
			            :bgColor="item.iconBgColor"
						:iconColor="item.iconFontColor"
			            :name="item.name"
			            :url="item.defaultUrl"
			            :key="index"
			        >
			        </menu-entry>
			    </view>
			</view>
		</view>
        <view class="no-data" v-else>
        	<text>没有应用，请联系管理员</text>
        </view>
    </view>
</template>

<script>
import menuEntry from '@/components/menu-entry/menu-entry.vue'
import { getAppResource } from '@/api/common.js'
import { utilities, business } from '@/utils/common.js'

export default {
    components: { 
		menuEntry 
	},
    data() {
        return {
			menuList: [],
			idKey: 'id',
			parentIdKey: 'parentId',
			childrenKey: 'children',
			dashboards: []
        }
    },
    onLoad() {
		this.init()
	},
	onShow() {
		business.refreshMsgCount()
	},
    methods: {
		init() {
			getAppResource().then(res=>{
				const listData = res.data.filter(item => {
					return item.id !== '0'
				})
				this.dashboards = utilities.transformToTreeFormat(listData, {
					idKey: this.idKey,
					parentIdKey: this.parentIdKey,
					childrenKey: this.childrenKey
				})
			})
		}
	}
}
</script>

<style lang="scss">
	page {
		background: #f1f2f4;
	}
	
	.content {
		margin-bottom: 100upx;
		background-color: #fff;
	}
	
	.listTitle {
		font-size: $uni-font-size-base;
		font-weight: bolder;
		padding: $uni-spacing-col-sm 20upx;
		padding-top: 20upx;
	}
	
	.flexRow {
	  display: flex;
	  flex-direction: row;
	  flex-wrap: wrap;
	  justify-content: flex-start;
	  align-items: center;
	}
	
	.no-data {
		display: flex;
		min-height: 300rpx;
		background-color: #FFFFFF;
		justify-content: center;
		align-items: center;
		text-align: center;
		font-size: 30rpx;
		color: #353535;
	}
</style>
